<template>
  <el-container>
    <el-header>{{ this.$store.state.uname }}</el-header>
    <el-container>
      <!-- 导航栏部分 -->

      <div :style="iscollWidth" class="ecColtop">
        <div class="ecCol">
          <i class="el-icon-caret-left" @click="showList(true)"></i>
          <i class="el-icon-caret-right" @click="showList(false)"></i>
        </div>
        <transition name="el-zoom-in-center" v-show="isCollapse">
          <el-menu
            class="el-menu-vertical-demo"
            :default-active="$router.path"
            :collapse="isCollapse"
            router
          >
            <el-menu-item index="/">
              <i class="el-icon-tableware"></i>
              <span slot="title"> 首页 </span>
            </el-menu-item>
            <el-menu-item index="/Steak-series">
              <i class="el-icon-fork-spoon"></i>
              <span slot="title"> 菜单管理 </span>
            </el-menu-item>
            <el-menu-item index="/order">
              <i class="el-icon-coin"></i>
              <span slot="title"> 订单管理 </span>
            </el-menu-item>
            <el-menu-item index="/conCation">
              <i class="el-icon-copy-document"></i>
              <span slot="title"> 内容分类 </span>
            </el-menu-item>
            <el-menu-item index="/Alocation">
              <i class="el-icon-monitor"></i>
              <span slot="title"> 桌号管理 </span>
            </el-menu-item>
            <el-menu-item index="/Seller">
              <i class="el-icon-postcard"></i>
              <span slot="title"> 商家信息 </span>
            </el-menu-item>
          </el-menu>
        </transition>
      </div>
      <el-container>
        <el-main style="height: 850px">
          <!-- 页面展示内容部分 -->
          <router-view />
        </el-main>
        <!-- 底部内容部分 -->
        <!-- <el-footer>底部内容提示</el-footer> -->
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      isCollapse: false,
      iscollWidth: "width:200px",
      indexTatle: "1",
    };
  },
  methods: {
    showList(e) {
      this.isCollapse = e;
      this.iscollWidth = e == false ? "width:200px" : "width:60px";
    },
  },
  created() {},
};
</script>

<style lang="less">
// 背景颜色后期去除
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}
// 背景颜色后期去除
.ecColtop {
  .el-menu--collapse {
    width: 60px;
  }
  .el-menu {
    border-right: none !important;
  }
}

/* index  muen */
.ecCol {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 15px 0;
}
.clo-409EFF {
  color: #409eff;
}

// 设置滚动条
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
</style>